<template>
	<view class="sign-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="签到统计"></uni-navbar></view>
		<view class="container">
			<view class="flex-box">
				<u-button :type="tab == 1 ? 'error' : 'default'" @click="tab = 1" throttle-time="100">日</u-button>
				<u-button :type="tab == 2 ? 'error' : 'default'" @click="tab = 2" throttle-time="100">月</u-button>
			</view>
			<view class="tab-box" v-if="tab == 1">
				<view class="selectDept">
					<uni-ren-calendar ref="ren" :myName="myName" :markDays="markDays" :collapsible="false" :headerBar="true" @getYM="getYM" @onDayClick="onDayClick"></uni-ren-calendar>
				</view>
				<view class="h2-title" v-if="days">
					{{ days }}天前
					<text>{{ curDate | formatGmt() }}</text>
				</view>
				<view class="h2-title" v-else>
					今天
					<text>{{ curDate | formatGmt() }}</text>
				</view>
				<view style="margin-bottom: 40rpx">
					<u-time-line class="time-line">
						<u-time-line-item v-if="amSign1.mode">
							<template v-slot:content>
								<view class="time-line-item">
									<view class="content">
										<view class="content-make">
											打卡时间 {{ amSign1.time ? amSign1.time : '' }}
											<view class="mode" :class="'mode' + amSign1.mode">
												<text>{{ resultMap[amSign1.mode] }}</text>
											</view>
										</view>
										<view class="content-address">
											<u-icon name="map"></u-icon>
											{{ amSign1.address ? amSign1.address : '未打卡' }}
										</view>
									</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item v-if="amSign2.mode">
							<template v-slot:content>
								<view class="time-line-item">
									<view class="content">
										<view class="content-make">
											打卡时间 {{ amSign2.time ? amSign2.time : '' }}
											<view class="mode" :class="'mode' + amSign2.mode">
												<text>{{ resultMap[amSign2.mode] }}</text>
											</view>
										</view>
										<view class="content-address">
											<u-icon name="map"></u-icon>
											{{ amSign2.address ? amSign2.address : '未打卡' }}
										</view>
									</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item v-if="pmSign1.mode">
							<template v-slot:content>
								<view class="time-line-item">
									<view class="content">
										<view class="content-make">
											打卡时间 {{ pmSign1.time ? pmSign1.time : '' }}
											<view class="mode" :class="'mode' + pmSign1.mode">
												<text>{{ resultMap[pmSign1.mode] }}</text>
											</view>
										</view>
										<view class="content-address">
											<u-icon name="map"></u-icon>
											{{ pmSign1.address ? pmSign1.address : '未打卡' }}
										</view>
									</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item v-if="pmSign2.mode">
							<template v-slot:content>
								<view class="time-line-item">
									<view class="content">
										<view class="content-make">
											打卡时间 {{ pmSign2.time ? pmSign2.time : '' }}
											<view class="mode" :class="'mode' + pmSign2.mode">
												<text>{{ resultMap[pmSign2.mode] }}</text>
											</view>
										</view>
										<view class="content-address">
											<u-icon name="map"></u-icon>
											{{ pmSign2.address ? pmSign2.address : '未打卡' }}
										</view>
									</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
				</view>
			</view>

			<view class="tab-box" v-else>
				<view class="date-picker"><date-time-picker placeholder="请选择日期" :defaultValue="date" fields="month" @change="timeChange($event, 'date')"></date-time-picker></view>

				<u-row gutter="20" class="row-list">
					<u-col span="4">
						<view class="row-item" @click="type = 1">
							<text class="num">{{ monthInfo.attendanceDays }}</text>
							天
							<view class="txt">出勤天数</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="row-item" @click="type = 2">
							<text class="num">{{ monthInfo.leaveDays }}</text>
							天
							<view class="txt">请假天数</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="row-item" @click="type = 3">
							<text class="num">{{ monthInfo.absenteeismDays }}</text>
							天
							<view class="txt">旷工天数</view>
						</view>
					</u-col>
				</u-row>
				<u-row gutter="20" class="row-list">
					<u-col span="4">
						<view class="row-item" @click="type = 4">
							<text class="num">{{ monthInfo.lateNums }}</text>
							次
							<view class="txt">迟到次数</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="row-item" @click="type = 5">
							<text class="num">{{ monthInfo.leaveEarlyTimes }}</text>
							次
							<view class="txt">早退次数</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="row-item" @click="type = 6">
							<text class="num">{{ monthInfo.LackCardNums }}</text>
							次
							<view class="txt">缺卡次数</view>
						</view>
					</u-col>
				</u-row>

				<view class="type-box" v-if="type == 1">
					<view class="h2-title">
						出勤
						<text>{{ listData1.totalStr }}</text>
					</view>
					<view class="k-list">
						<view class="list-item" v-for="(item, index) in listData1.listData" :key="index">
							{{ item.dateStr }}（{{ item.weekdayStr }}）
							<text class="time">{{ item.attributeStr }}</text>
						</view>
					</view>
				</view>
				<view class="type-box" v-if="type == 2">
					<view class="h2-title">
						请假
						<text>累计 {{ listData2.hour }} 小时</text>
					</view>
					<view class="k-list">
						<view class="list-item" v-for="(item, index) in listData2.dayList" :key="index">
							{{ item.date }}（{{ item.week }}）
							<text class="tag" :class="'mode' + item.type">{{ item.typeName }}</text>
							<text class="time">{{ item.hour }}小时</text>
						</view>
					</view>
				</view>
				<view class="type-box" v-if="type == 3">
					<view class="h2-title">
						旷工
						<text>{{ listData3.totalStr }}</text>
					</view>
					<view class="k-list">
						<view class="list-item" v-for="(item, index) in listData3.listData" :key="index">
							{{ item.dateStr }}（{{ item.weekdayStr }}）
							<text class="time">{{ item.attributeStr }}</text>
						</view>
					</view>
				</view>
				<view class="type-box" v-if="type == 4">
					<view class="h2-title">
						迟到
						<text>{{ listData4.totalStr }}</text>
					</view>
					<view class="k-list">
						<view class="list-item" v-for="(item, index) in listData4.listData" :key="index">
							{{ item.dateStr }}（{{ item.weekdayStr }}）
							<text class="time">{{ item.attributeStr }}</text>
						</view>
					</view>
				</view>
				<view class="type-box" v-if="type == 5">
					<view class="h2-title">
						早退
						<text>{{ listData5.totalStr }}</text>
					</view>
					<view class="k-list">
						<view class="list-item" v-for="(item, index) in listData5.listData" :key="index">
							{{ item.dateStr }}（{{ item.weekdayStr }}）
							<text class="time">{{ item.attributeStr }}</text>
						</view>
					</view>
				</view>
				<view class="type-box" v-if="type == 6">
					<view class="h2-title">
						缺卡
						<text>{{ listData6.totalStr }}</text>
					</view>
					<view class="k-list">
						<view class="list-item" v-for="(item, index) in listData6.listData" :key="index">
							{{ item.dateStr }}（{{ item.weekdayStr }}）
							<text class="time">{{ item.attributeStr }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="false && curDate && todayTime"></view>
	</view>
</template>

<script>
import uniRenCalendar from '@/components/uni-ren-calendar.vue';
import dateTimePicker from '@/components/uni-datetime-picker';
import { mapState } from 'vuex';
export default {
	components: {
		uniRenCalendar,
		dateTimePicker
	},
	data() {
		return {
			myName: '',
			tab: 1,
			type: 1,
			myName: '',
			date: '',
			days: 0,
			curDate: '',
			todayTime: '',
			markDays: [],
			resultMap: {
				0: '正常',
				1: '迟到',
				2: '早退',
				3: '缺卡',
				4: '出差',
				5: '请假',
				6: '调休',
				7: '外勤',
				8: '加班'
			},

			amSign1: {
				time: '',
				address: '',
				mode: '',
				img: ''
			},
			amSign2: {
				time: '',
				address: '',
				mode: '',
				img: ''
			},
			pmSign1: {
				time: '',
				address: '',
				mode: '',
				img: ''
			},
			pmSign2: {
				time: '',
				address: '',
				mode: '',
				img: ''
			},
			listData1: '',
			listData2: '',
			listData3: '',
			listData4: '',
			listData5: '',
			listData6: '',
			monthInfo: {
				LackCardNums: 0,
				absenteeismDays: 0,
				attendanceDays: 0,
				lateNums: 0,
				leaveDays: 0,
				leaveEarlyTimes: 0
			}
		};
	},
	onLoad(option) {
		this.loadLogin();

		let date = this.$writeCurrentDate();

		this.date = date.year + '-' + date.month;
		this.curDate = date.year + '-' + date.month + '-' + date.date;
		this.todayTime = date.year + '-' + date.month + '-' + date.date;
		this.days = this.$daysBetweenNum(this.todayTime, this.todayTime);

		let start = date.year + '-' + date.month + '-01';
		let end = date.year + '-' + date.month + '-31';
		this.getInitData(start, end);
		this.getMonthData(start, end);
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.Authorization) {
				this.userId = this.userInfo.sysUser.id;
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.myName = this.userInfo.sysUser.userName;
				this.dept = this.userInfo.deptName;
			} else {
				this.$logout();
			}
		},
		timeChange({ date, dt }, idx) {
			this[idx] = date.year + '-' + date.month2;
			let start = date.year + '-' + date.month2 + '-01';
			let end = date.year + '-' + date.month2 + '-31';
			this.getMonthData(start, end);
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		onDayClick(data) {
			this.curDate = data.date;
		},
		getMonthData(beginTime, endTime) {
			this.$request('/oaAttnd/stat/monthSummary', {
				userId: this.userId,
				clientCode: this.clientCode,
				beginTime: beginTime,
				endTime: endTime
			}).then((res) => {
				if (res.data && res.data.records) {
					this.monthInfo = res.data.records;
				}
			});

			this.getMonthSumData(beginTime, endTime, 1, 'listData1');
			this.getMonthSumData(beginTime, endTime, 2, 'listData2');
			this.getMonthSumData(beginTime, endTime, 3, 'listData3');
			this.getMonthSumData(beginTime, endTime, 4, 'listData4');
			this.getMonthSumData(beginTime, endTime, 5, 'listData5');
			this.getMonthSumData(beginTime, endTime, 6, 'listData6');
		},
		getMonthSumData(beginTime, endTime, flag, listData) {
			this.$request('/oaAttnd/stat/monthSumDetail', {
				userId: this.userId,
				clientCode: this.clientCode,
				beginTime: beginTime,
				endTime: endTime,
				flag: flag,
				month: this.date
			}).then((res) => {
				if (res.data && res.data.records) {
					this[listData] = res.data.records;
				}
				if (res.data && res.data.dayList) {
					this[listData] = res.data;
				}
			});
		},
		getInitData(beginTime, endTime) {
			this.$request('/oaAttnd/stat/dayStatusDetails', {
				userId: this.userId,
				clientCode: this.clientCode,
				beginTime: beginTime,
				endTime: endTime
			}).then((res) => {
				if (res.data && res.data.records) {
					res.data.records.map((val) => {
						this.markDays.push({
							days: val.day,
							typeName: val.statusStr,
							type: val.statusNum
						});
					});
				}
			});
		},
		getselectData(time) {
			this.amSign1.mode = '';
			this.amSign2.mode = '';
			this.pmSign1.mode = '';
			this.pmSign2.mode = '';
			this.$request('/oaAttnd/record/list', {
				userId: this.userId,
				clientCode: this.clientCode,
				dateRange: time
			}).then((res) => {
				if (res.data && res.data.records) {
					res.data.records.forEach((item) => {
						switch (item.classShift) {
							case '1':
								this.amSign1.time = item.clockTime;
								this.amSign1.mode = item.clockResult;
								this.amSign1.address = item.clockPlace;
								break;
							case '2':
								this.amSign2.time = item.clockTime;
								this.amSign2.mode = item.clockResult;
								this.amSign2.address = item.clockPlace;
								break;
							case '3':
								this.pmSign1.time = item.clockTime;
								this.pmSign1.mode = item.clockResult;
								this.pmSign1.address = item.clockPlace;
								break;
							case '4':
								this.pmSign2.time = item.clockTime;
								this.pmSign2.mode = item.clockResult;
								this.pmSign2.address = item.clockPlace;
								break;
						}
					});
				}
			});
		},
		getYM(v) {
			let start = v + '-01';
			let end = v + '-31';
			this.getInitData(start, end);
		}
	},
	watch: {
		curDate: {
			handler(newVal) {
				this.getselectData(newVal + ' - ' + newVal);
				this.days = this.$daysBetweenNum(newVal, this.todayTime);
			}
		}
	}
};
</script>

<style lang="scss">
.container {
	border-top: 20rpx solid #f8f9fe;
	padding: 28rpx 30rpx;
	background-color: #fff;
}

.myName {
	padding: 20rpx 30rpx;
	background: #fff;
	border-bottom: 1px solid #eee;

	.u-avatar {
		vertical-align: bottom;
	}

	text {
		display: inline-block;
		//
		margin-left: 20rpx;
		font-size: 16px;
	}
}

.time-line {
	margin-top: 30rpx;

	.time-line-node {
		width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
		background: #bbb;
	}

	.time-line-item {
		padding: 30rpx;
		border-radius: 16rpx;
		background-color: #f8f9fe;

		.content {
			font-size: 15px;
			line-height: 36rpx;
		}

		.content-node {
			margin-bottom: 20rpx;
			color: #999;
			font-size: 14px;
		}

		.content-make {
			font-size: 16px;
			display: flex;
			align-items: center;
		}

		.content-address {
			margin-top: 10rpx;
			font-size: 14px;
			line-height: 36rpx;
			color: #666666;
			width: 80%;
		}

		.content-time1 {
			font-size: 15px;
			line-height: 36rpx;
			color: #999;
			text-align: center;
		}

		.content-time2 {
			margin-top: 20rpx;
			font-size: 25px;
			line-height: 56rpx;
			text-align: center;
		}

		.mode {
			margin-left: 10rpx;
			padding: 0 10rpx;
			font-size: 13px;
			color: #f5a623;
			line-height: 38rpx;
			border-radius: 4rpx;
			border: 1rpx solid;
		}

		.mode0 {
			color: #666;
		}

		.mode1 {
			color: #ff7100;
		}

		.mode2 {
			color: #ff7100;
		}

		.mode3 {
			color: #ff7100;
		}

		.mode4 {
			color: #3396fb;
		}

		.mode5 {
			color: #49d34e;
		}

		.mode6 {
			color: #f5a623;
		}

		.mode7 {
			color: #2bba91;
		}
	}
}

.tab-box {
	margin-top: -88rpx;

	.row-list {
		margin: 28rpx -10rpx 40rpx;

		.row-item {
			padding: 38rpx 40rpx;
			font-size: 12px;
			font-weight: bold;
			color: #333;
			background: #f8f9fe;
			border-radius: 12rpx;

			.num {
				font-size: 24px;
			}

			.txt {
				margin-top: 12rpx;
				font-size: 12px;
				font-weight: normal;
				color: #666;
				line-height: 34rpx;
			}
		}
	}

	.h2-title {
		margin-bottom: 42rpx;
		font-size: 18px;
		font-weight: bold;
		color: #333;
		line-height: 50rpx;

		text {
			margin-left: 16rpx;
			font-size: 14px;
			font-weight: normal;
			color: #666;
			line-height: 40rpx;
		}
	}

	.k-list {
		.list-item {
			display: flex;
			align-items: center;
			margin: 28rpx 0;
			font-size: 15px;
			color: #333;
			line-height: 42rpx;

			.time {
				margin-left: auto;
			}

			.tag {
				display: block;
				margin-right: auto;
				width: 64rpx;
				height: 32rpx;
				font-size: 10px;
				color: #fff;
				line-height: 32rpx;
				text-align: center;
				background: #3396fb;
			}

			.mode0 {
				background: #666;
			}

			.mode1 {
				background: #ff7100;
			}

			.mode2 {
				background: #ff7100;
			}

			.mode3 {
				background: #ff7100;
			}

			.mode4 {
				background: #3396fb;
			}

			.mode5 {
				background: #49d34e;
			}

			.mode6 {
				background: #f5a623;
			}

			.mode7 {
				background: #2bba91;
			}
		}
	}

	.date-picker {
		margin-left: auto;
		padding: 0 10px;
		width: 126px;
		height: 88rpx;
		font-size: 14px;
		color: #afb0b3;
		line-height: 84rpx;
		border-radius: 8rpx;
		border: 1rpx solid;

		/deep/ .flex {
			justify-content: center;
		}
	}
}

.flex-box {
	width: 192rpx;

	button {
		font-size: 14px;
		width: 88rpx;
		height: 88rpx;
	}
}
</style>
